<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .search-container {
            margin-bottom: 20px;
        }
        .search-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .result-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .song-name {
            font-weight: bold;
        }
        .song-artist {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>搜索功能测试</h1>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索歌曲、歌手" id="searchInput">
    </div>
    <div id="results"></div>

    <script>
        const mockSongs = [
            {
                id: 1,
                name: '骄傲',
                artist: '王源',
                cover: 'https://ai-public.mastergo.com/ai/img_res/9b30f4ee0302b8d25ce0fca941c22eca.jpg',
                url: '/music/wangyuan/jiaoao.mp3',
                duration: 240
            },
            {
                id: 2,
                name: '夜的钢琴曲',
                artist: '石进',
                cover: 'https://ai-public.mastergo.com/ai/img_res/c1ce38ecf2bd6fbe61281df433ca6b50.jpg',
                url: '/music/shijin/yedegangqinqu.mp3',
                duration: 180
            },
            {
                id: 3,
                name: '童话镇',
                artist: '陈一发儿',
                cover: 'https://ai-public.mastergo.com/ai/img_res/f9fc38e361ab67a35c0e5506eddd71df.jpg',
                url: '/music/chenyifaer/tonghuazhen.mp3',
                duration: 210
            },
            {
                id: 4,
                name: '起风了',
                artist: '买辣椒也用券',
                cover: 'https://ai-public.mastergo.com/ai/img_res/45336b12831b6117c08a852940c79512.jpg',
                url: '/music/malajiaoyeyongquan/qifengle.mp3',
                duration: 195
            }
        ];

        function performSearch(keyword) {
            if (!keyword.trim()) {
                return [];
            }
            
            const searchTerm = keyword.toLowerCase().trim();
            return mockSongs.filter(song => 
                song.name.toLowerCase().includes(searchTerm) || 
                song.artist.toLowerCase().includes(searchTerm)
            );
        }

        function displayResults(results) {
            const resultsContainer = document.getElementById('results');
            
            if (results.length === 0) {
                resultsContainer.innerHTML = '<p>没有找到相关歌曲</p>';
                return;
            }
            
            resultsContainer.innerHTML = results.map(song => `
                <div class="result-item">
                    <div class="song-name">${song.name}</div>
                    <div class="song-artist">${song.artist}</div>
                </div>
            `).join('');
        }

        document.getElementById('searchInput').addEventListener('input', function(e) {
            const results = performSearch(e.target.value);
            displayResults(results);
        });

        // 测试搜索功能
        console.log('测试搜索"骄傲":', performSearch('骄傲'));
        console.log('测试搜索"王源":', performSearch('王源'));
        console.log('测试搜索"钢琴":', performSearch('钢琴'));
    </script>
</body>
</html>